import { defineComponent } from 'vue'
import { NDataTable, NSpace } from 'naive-ui'
import Card from '@/components/card'
import { useColumns } from './use-columns'
import { useTable } from './use-table'

const ProjectDataTab = defineComponent({
  name: 'ProjectDataTab',
  setup() {
    const { state, onOperationClick } = useTable()
    const { columnsRef } = useColumns(onOperationClick)

    return {
      state,
      columnsRef
    }
  },
  render() {
    return (
      <NSpace vertical>
        <Card>
          <NSpace vertical>
            <NDataTable
              row-class-name='items'
              columns={this.columnsRef.columns}
              size='small'
              data={this.state.list}
              loading={this.state.loading}
              scrollX={this.columnsRef.tableWidth}
            />
          </NSpace>
        </Card>
      </NSpace>
    )
  }
})

export default ProjectDataTab
